import React from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import Icon from "react-native-vector-icons/Ionicons";
export interface SealCardViewModel {
    id: string;
    title: string;
    status: number;
    personLabel: '经办人' | '申请人';
    personName: string;
    mainFields: {
        icon: string;
        label: string;
        value: string;
    }[];
}

interface SealCardProps {
    onPress: () => void;
    item: SealCardViewModel;
}

const STATUS_CONFIG: { [key: number]: { text: string; color: string } } = {
    1: {text: "审批中", color: '#ff9800'},
    2: {text: "审批通过", color: '#4caf50'},
    3: {text: "审批不通过", color: '#f44336'},
    4: {text: "已取消", color: '#8A8A8A'},
    5: {text: "已驳回", color: '#F86C6C'},
};

export const SealCard: React.FC<SealCardProps> = ({item, onPress}) => {
    const statusInfo = STATUS_CONFIG[item.status] || {text: '未知', color: '#9e9e9e'};
    return (
        <TouchableOpacity style={styles.card} onPress={onPress}>
            {/* 卡片头部 */}
            <View style={styles.header}>
                <Text style={styles.title}>{item.title}</Text>
                <View style={[styles.statusBadge, {borderColor: statusInfo.color}]}>
                    <Text style={[styles.statusText, {color: statusInfo.color}]}>
                        {statusInfo.text}
                    </Text>
                </View>
            </View>

            {/* 卡片中部信息 */}
            <View style={styles.content}>
                <View style={styles.infoRow}>
                    <Icon name={"person-outline"} size={16} color="#666" style={styles.fieldIcon}/>
                    <Text style={styles.personLabel}>{item.personLabel}：</Text>
                    <Text style={styles.personName}>{item.personName}</Text>
                </View>
                {item.mainFields.map((field, index) => (
                    <View style={styles.infoRow} key={index}>
                        <Icon name={field.icon} size={16} color="#666" style={styles.fieldIcon}/>
                        <Text style={styles.fieldLabel}>{field.label}：</Text>
                        <Text style={styles.fieldValue}>{field.value}</Text>
                    </View>
                ))}
            </View>
        </TouchableOpacity>
    );
};

const styles = StyleSheet.create({
    card: {
        backgroundColor: 'white',
        borderRadius: 8,
        padding: 16,
        marginHorizontal: 12,
        marginVertical: 8,
        elevation: 2,
        shadowColor: '#000',
        shadowOffset: {width: 0, height: 1},
        shadowOpacity: 0.2,
        shadowRadius: 1.41,
    },
    header: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 12,
    },
    title: {
        fontSize: 17,
        fontWeight: 'bold',
        color: '#333',
        flex: 1, // 确保标题过长时能正确换行
    },
    statusBadge: {
        borderWidth: 1,
        borderRadius: 4,
        paddingVertical: 2,
        paddingHorizontal: 8,
        marginLeft: 10,
    },
    statusText: {
        fontSize: 13,
        fontWeight: 'bold',
    },
    content: {
        paddingTop: 12,
        borderTopWidth: 1,
        borderTopColor: '#f0f0f0',
    },
    infoRow: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 8,
    },
    personLabel: {
        fontSize: 14,
        color: '#666',
    },
    personName: {
        fontSize: 14,
        color: '#333',
        fontWeight: '500',
    },
    fieldIcon: {
        marginRight: 6,
    },
    fieldLabel: {
        fontSize: 14,
        color: '#666',
    },
    fieldValue: {
        fontSize: 14,
        color: '#333',
        flex: 1, // 允许多行显示
    },
});